<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="/static/js/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/js/bootstrap/css/bootstrap-theme.css">
    <script src="/static/js/jquery-validation/jquery.validate.min.js"></script>
    <script src="/static/js/js/common.js"></script>
    <script src="/static/js/js/md5.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>

</head>
<body>
<div class="panel panel-default">
  <div class="panel-heading">秒杀订单详情</div>
    <form>
        订单编号:<input  id="orderId" th:value="${orderInfo.orderId}"><br>
        订单名称:<input  th:value="${goods.goodsName}"><br>
        单价:<input th:value="${goods.goodsPrice}"><br>
        订单数量:<input th:value="${orderInfo.goodsCount}"><br>
        最终价格:<input th:value="${orderInfo.orderMoney}"><br>
        地址名称:<input th:value="${orderInfo.addressName}"><br>
    </form>

  <table class="table" id="goodslist">
        <tr>  
        <td>商品名称</td>  
        <td th:text="${goods.goodsName}" colspan="3"></td>
     </tr>  
     <tr>  
        <td>商品图片</td>  
        <td colspan="2"><img th:src="@{${goods.goodsImg}}" width="200" height="200" /></td>  
     </tr>
      <tr>  
        <td>订单价格</td>  
        <td colspan="2" th:text="${orderInfo.orderMoney}"></td>
     </tr>
     <tr>
     		<td>下单时间</td>  
        	<td th:text="${#dates.format(orderInfo.createDate, 'yyyy-MM-dd HH:mm:ss')}" colspan="2"></td>  
     </tr>
     <tr>
     	<td>订单状态</td>  
        <td >
        	<span th:if="${orderInfo.status eq 0}">未支付</span>
        	<span th:if="${orderInfo.status eq 1}">待发货</span>
        	<span th:if="${orderInfo.status eq 2}">已发货</span>
        	<span th:if="${orderInfo.status eq 3}">已收货</span>
        	<span th:if="${orderInfo.status eq 4}">已退款</span>
        	<span th:if="${orderInfo.status eq 5}">已完成</span>
        </td>  
        <td>
<!--        	<button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>-->
        	<button class="btn btn-primary btn-block" th:onclick="zfbpay()">立即支付</button>
        </td>
     </tr>
      <tr>
     		<td>收货人</td>  
        	<td colspan="2">yue  13240414892</td>
     </tr>
     <tr>
     		<td>收货地址</td>  
        	<td colspan="2">河北唐山</td>
     </tr>
  </table>
</div>
</body>
<script>
    function zfbpay(){
            var orderId = $("#orderId").val();
            alert(orderId)
            $.ajax({
                url:"/alipay/payOrder?orderSn="+orderId,   //还未开发
                type:"GET",
                data:{
                    orderId:orderId
                },
                success:function(data){
                    console.log(data)
                    document.querySelector('body').innerHTML = data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                    document.forms[0].submit();
                    console.log(res);
                },
                error:function(){
                    layer.msg("客户端请求有误");
                }
            });
    }
</script>
</html>
